<template>
    <div class="personmessage">
        <Top title="个人信息" iconShow="1">
         
        <span slot="icon">
          <span class="submit">提交</span>
        </span>
     
        </Top>
        
        

    <group >
        <div class="personmessage-address-title">联系地址</div>
        <div class="personmessage-city">
            <span>所在城市</span>
            <input placeholder="请定位您所在城市" />
            <i class="iconfont icon-dingwei"></i>
        </div>
        <div class="personmessage-address">
            <p>居住地址</p>
            <textarea placeholder="请填写信息地址，不少于5个字"></textarea>
        </div>
        <div class="personmessage-companyname">
            <span>公司名称</span>
            <input placeholder="请输入您所在公司名称" />
        </div>
        <div class="personmessage-companysite">
            <span>公司地址</span>
            <input placeholder="请输入您所在公司地址名称" />
        </div>
       <popup-picker :title="title1" :data="list1" v-model="value1"></popup-picker>
       <popup-picker :title="title2" :data="list2" v-model="value2"></popup-picker>
       <div class="personmessage-link-title">
           紧急联系人（建议填写常用联系人）
       </div>
       <div class="personmessage-link-family">
           <div class="personmessage-link-family-line1">亲属联系方式</div>
           <div class="personmessage-link-family-line2"><span>手机号码</span><input placeholder="请输入手机号码"/></div>
           <div class="personmessage-link-family-line3"><span>姓名</span><input placeholder="请输入真实姓名"/></div>
       </div>
       <div class="personmessage-link-gap"></div>
       <div class="personmessage-link-friend">
           <div class="personmessage-link-friend-line1">亲属联系方式</div>
           <div class="personmessage-link-friend-line2"><span>手机号码</span><input placeholder="请输入手机号码"/></div>
           <div class="personmessage-link-friend-line3"><span>姓名</span><input placeholder="请输入真实姓名"/></div>
       </div>
    </group>
        
        
    </div>
</template>
<script>

import Top from '../../../../components/Header'
import { PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch  } from 'vux'

export default {
    name: 'personmessage',
    components: { Top, PopupPicker,PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch },

    data() {
        return {
            value2:[''],
            title2:'工作年限',
           list2: [['1年', '2年', '3年以上']],
           value1:[''],
            title1:'所在行业',
           list1: [['计算机', '催收', '按摩']],
        }
    },
    methods: {
        onShow() {
            console.log('on show')
        },
        onHide() {
            console.log('on hide')
        },
        onChange() {
            console.log('on change')
        },
        onValuesChange(picker, values) {
            if (values[0] > values[1]) {
                picker.setSlotValue(1, values[0]);
            }
        }
    }
}
</script>
<style lang="scss">
@import '../../../../scss/variable/base.scss';
.modal-open{
    width: 100%;
}
.vux-cell-box{
    height: 1.33rem;
    background: #fff;
    border-bottom: 1px solid $borderColor;
}
.weui-cells {
    margin-top:0 !important; 
    font-size: 0.4rem;
}
.vux-cell-box:before{
    border-top:none !important;
}
.weui-cell{
    padding: 0 0.4rem !important;
    font-size: 0.4rem;
    line-height: 1.33rem;
}
.personmessage {
    .submit{
        position: absolute;
        right:0.4rem;
        font-size: 0.4rem;
    }
    margin-bottom: 0.4rem;
    padding-top: 1.2rem;
    text-align: left;
    &-address-title,&-link-title {
        width: 100%;
        height: 1.2rem;
        background: #f5f5f5;
        font-size: 0.4rem;
        line-height: 1.2rem;
        box-sizing: border-box;
        padding-left: 0.4rem;
    }
    &-city {
        display: flex;
        box-sizing: border-box;
        padding-left: 0.4rem;
        // height: 1.33rem;
        background: #fff;
        border-bottom: 1px solid $borderColor;
        span {
            font-size: 0.4rem;
            flex: 2;
            line-height: 1.33rem;
        }
        input {
            flex: 6;
            border: none;
            outline: none;
            font-size: 0.4rem;
            height: 1.33rem;
            line-height: 0.5rem;
        }
        i {
            flex: 2;
            text-align: center;
            line-height: 1.33rem;
        }
    }
    &-address {
        box-sizing: border-box;
        padding: 0 0.4rem;
        background: #fff;
        border-bottom: 1px solid $borderColor;
        p {
            line-height: 1.33rem;
            font-size: 0.4rem;
        }
        textarea {
            width: 100%;
            line-height: 0.5rem;
            height: 1.37rem;
            border: none;
            outline: none;
            resize:none;
        }
    }
    &-companyname ,&-companysite{
        display: flex;
        height: 1.33rem;
        line-height: 1.33rem;
        background: #fff;
        box-sizing: border-box;
        padding: 0 0.4rem;
        border-bottom: 1px solid $borderColor;
        span {
            flex: 3;
            font-size: 0.4rem;
        }
        input {
            flex: 9;
            border: none;
            line-height: 0.5rem;
            outline: none;
            font-size: 0.4rem;
        }
    }
    &-link-gap{
        height: 0.4rem;
        background: $bgColor;
    }
    &-link-family,&-link-friend{

        &-line1{
            box-sizing: border-box;
            padding: 0 0.4rem;
            color: $primaryColor;
            border-bottom: 1px solid $borderColor;
            width: 100%;
            height: 1.33rem;
            font-size: 0.4rem;
            line-height: 1.33rem;
        }
        &-line2{
            border-bottom: 1px solid $borderColor;
        }
        &-line2,&-line3{
            font-size: 0.4rem;
            box-sizing: border-box;
            padding: 0 0.4rem;
            height: 1.33rem;
            display: flex;
            line-height: 1.33rem;
            span{
                flex: 3;
            }
            input{
                flex: 9;
                border: none;
                outline: none;
                line-height: 0.5rem;
            }
        }
    }
}
</style>


